{include file="inc/header_index_mui.html"}
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/aui.css" />
<link rel="stylesheet" href="css/mx2.css" />
<link rel="stylesheet" href="css/alert.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script>
window.location ="#001";//自动跳转到锚点处
</script>

		<div class="mui-content mui-text-center  ">
			<div>
				<div  class="fl re aui-col-4 mui-text-center" style="margin: 16% 0 0 20%;">
					<img class="bianhui sai5 fl  aui-col-7 last1" id="qiu7"  src="image/mx7.png" alt="" />
					<img class="aui-col-3 ab sai5" style="top: 28%;right:49% ;" src="image/mx_suo.png" id="suo7" />
				</div>
				
				<div class="fl sanjiaole" style="margin: 110px 0 0 -10px;"></div>
				<div class="fl" style="width:102px ;height: 60px;background: rgba(255, 255, 255,0.2);;margin-top: 96px;border-radius: 6px;">
					<p class="aui-color-white" style="margin: 4px;">第七关</p>
					<div style="background: rgba(255, 255, 255,0.4);height: 20px;border-radius:14px ;margin:5px auto;" class="aui-col-6 aui-color-white"><img src="image/renshu.png" />{$data.num_7}</div>
				</div>
				<div class="clear"></div>
			</div>
			<div>
				<img src="image/mxri_4.png" alt="" />
			</div>
			<div class="hidden">
				<div class="fr re aui-col-4 mui-text-center" style="padding: 5px 0;">
					<img class="bianhui sai5 aui-col-5 last1" id="qiu6" src="image/mx6.png" alt="" />
					<img class="aui-col-3 ab sai5" style="top: 22%;right:34% ;" src="image/mx_suo.png" id="suo6" />
				</div>
				<div class="fr sanjiaori" style="margin-top: 24px;"></div>
				<div class="fr" style="width:102px ;height: 60px;background: rgba(255, 255, 255,0.2);margin-top: 10px;border-radius: 6px;">
					<p class="aui-color-white" style="margin: 4px;">第六关</p>
					<div style="background: rgba(255, 255, 255,0.4);height: 20px;border-radius:14px ;margin:5px auto;" class="aui-col-6 aui-color-white"><img src="image/renshu.png" />{$data.num_6}</div>
				</div>
			</div>
			<div>
				<img src="image/mxle_4.png" alt="" />
			</div>
			<div class="hidden">
				<div class="fl aui-col-4 mui-text-center re" style="padding: 5px 0;">
					<img class="bianhui sai5 aui-col-5 last1" id="qiu5" src="image/mx5.png" alt="" />
					<img class="aui-col-3 ab sai5" style="top: 22%;right:34% ;" src="image/mx_suo.png" id="suo5" />
				</div>
				<div class="fl sanjiaole" style="margin-top: 24px;"></div>
				<div class="fl" style="width:102px ;height: 60px;background: rgba(255, 255, 255,0.2);margin-top: 10px;border-radius: 6px;">
					<p class="aui-color-white" style="margin: 4px;">第五关</p>
					<div style="background: rgba(255, 255, 255,0.4);height: 20px;border-radius:14px ;margin:5px auto;" class="aui-col-6 aui-color-white"><img src="image/renshu.png" />{$data.num_5}</div>
				</div>
			</div>
			<div>
				<img src="image/mxri_5.png" alt="" />
			</div>
			<div class="hidden">
				<div class="fr re aui-col-4 mui-text-center" style="padding: 5px 0;">
					<img class="bianhui sai4 aui-col-6 last1" id="qiu4" src="image/mx4.png" alt="" />
					<img class="aui-col-3 ab sai4" style="top: 16%;right:37% ;" src="image/mx_suo.png" id="suo4" />
				</div>
				<div class="fr sanjiaori" style="margin-top: 24px;"></div>
				<div class="fr" style="width:102px ;height: 60px;background: rgba(255, 255, 255,0.2);margin-top: 10px;border-radius: 6px;">
					<p class="aui-color-white" style="margin: 4px;">第四关</p>
					<div style="background: rgba(255, 255, 255,0.4);height: 20px;border-radius:14px ;margin:5px auto;" class="aui-col-6 aui-color-white"><img src="image/renshu.png" />{$data.num_4}</div>
				</div>
			</div>
			<div>
				<img src="image/mxle_4.png" alt="" />
			</div>
			<div class="hidden">
				<div class="fl re aui-col-4 mui-text-center" style="padding: 5px 0;">
					<img class="bianhui sai3 aui-col-5 last1" id="qiu3" src="image/mx3.png" alt="" />
					<img class="aui-col-3 ab sai3" style="top: 22%;right:34% ;" src="image/mx_suo.png" id="suo3" />
				</div>
				<div class="fl sanjiaole" style="margin-top: 24px;"></div>
				<div class="fl" style="width:102px ;height: 60px;background: rgba(255, 255, 255,0.2);margin-top: 10px;border-radius: 6px;">
					<p class="aui-color-white" style="margin: 4px;">第三关</p>
					<div style="background: rgba(255, 255, 255,0.4);height: 20px;border-radius:14px ;margin:5px auto;" class="aui-col-6 aui-color-white"><img src="image/renshu.png" />{$data.num_3}</div>
				</div>
			</div>
			<div>
				<img src="image/mxri_5.png" alt="" />
			</div>
			<div class="hidden">
				<div class="fr re aui-col-4 mui-text-center" style="padding: 5px 0;">
					<img class="bianhui sai2 aui-col-5 last1" id="qiu2" src="image/mx2.png" alt="" />
					<img class="aui-col-3 ab sai2" style="top: 22%;right:34% ;" src="image/mx_suo.png" id="suo2" />
				</div>
				<div class="fr sanjiaori" style="margin: 24px -10px 0 0;"></div>
				<div class="fr" style="width:102px ;height: 60px;background: rgba(255, 255, 255,0.2);margin-top: 10px;border-radius:6px ;">
					<p class="aui-color-white" style="margin: 4px;">第二关</p>
					<div style="background: rgba(255, 255, 255,0.4);height: 20px;border-radius:14px ;margin:5px auto;" class="aui-col-6 aui-color-white"><img src="image/renshu.png" />{$data.num_2}</div>
				</div>
			</div>
			<div>
				<img src="image/mxle_4.png" alt="" />
			</div>
			<div class="re">
				<div class="fl re aui-col-4 mui-text-center" style="margin: 0 0 51% 0;">
					<img class="bianhui sai1  aui-col-5 last1" id="qiu1"  src="image/mx1.png" alt="" />
					<img class="aui-col-3 ab sai1" style="top: 22%;right:34% ;" src="image/mx_suo.png" id="suo1" />
				</div>
				<div class="fl sanjiaole" style="margin: 46px 0 0 18px;"></div>
				<div class="fl" style="width:102px ;height: 60px;background: rgba(255, 255, 255,0.2);margin-top: 26px;border-radius:6px ;">
					<p class="aui-color-white" style="margin: 4px;">第一关</p>
					<div style="background: rgba(255, 255, 255,0.4);height: 20px;border-radius:14px ;margin:5px auto;" class="aui-col-6 aui-color-white"><img src="image/renshu.png" /> {$data.num_1}</div>
				</div>
				<div class="clear"></div>
					<a name="001" id="001"></a>
			</div>

			<!---->
			<div class="mx_alert">

				<div id="sai_qiu1" class="ab  aui-col-9  mui-text-center">
					<img class=" aui-col-4" style="margin: -65px  auto" src="image/jiu_t.png" alt="">
					<h1 class="aui-color-white sai-mar-t">商品名称</h1>
					<h3 class="aui-color-white">10积分</h3>
					<h3 class="aui-color-white">独创江湖16人模式	</h3>
					<div class="ab aui-col-9  aui-background-white alert-lg-white mui-text-left" style="height: 140px;padding:20px 20px">
						如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
					</div>
					<h2 class="aui-color-white" style="margin :150px 0 0 0">剩余门票:{$data.my_rcq_1}张</h2>
					<div class="mui-row ab rebom aui-col-10 ">
						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="queding('01')"><a class="aui-color-white" href="JavaScript:void(0)" >我要挑战</a></button>
						</div>
					</div>
				</div>
			
				<!--第一关-->
				<div id="sai_qiu2" class="ab  aui-col-9  mui-text-center">
					<img class=" aui-col-4" style="margin: -65px  auto" src="image/jiu_t.png" alt="">
					<h1 class="aui-color-white sai-mar-t">商品名称</h1>
					<h3 class="aui-color-white">10积分</h3>
					<h3 class="aui-color-white">独创江湖16人模式	</h3>
					<div class="ab aui-col-9  aui-background-white alert-lg-white mui-text-left" style="height: 140px;padding:20px 20px">
						如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
					</div>
					<h2 class="aui-color-white" style="margin :150px 0 0 0">剩余门票:{$data.my_rcq_2}张</h2>
					<div class="mui-row ab rebom aui-col-10 ">
						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="queding('02')"><a class="aui-color-white" href="JavaScript:void(0)" >我要挑战</a></button>
						</div>
					</div>
				</div>
				<!--第二关-->
				<div id="sai_qiu3" class="ab  aui-col-9  mui-text-center">
					<img class=" aui-col-4" style="margin: -65px  auto" src="image/jiu_t.png" alt="">
					<h1 class="aui-color-white sai-mar-t">商品名称</h1>
					<h3 class="aui-color-white">10积分</h3>
					<h3 class="aui-color-white">独创江湖16人模式	</h3>
					<div class="ab aui-col-9  aui-background-white alert-lg-white mui-text-left" style="height: 140px;padding:20px 20px">
						如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
					</div>
					
					<div class="mui-row ab rebom aui-col-10 ">

						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="queding('03')"><a class="aui-color-white" href="JavaScript:void(0)" >我要挑战</a></button>
						</div>
					</div>
				</div>
				<!--第三关-->
				<div id="sai_qiu4" class="ab  aui-col-9  mui-text-center">
					<img class=" aui-col-4" style="margin: -65px  auto" src="image/jiu_t.png" alt="">
					<h1 class="aui-color-white sai-mar-t">商品名称</h1>
					<h3 class="aui-color-white">10积分</h3>
					<h3 class="aui-color-white">独创江湖16人模式	</h3>
					<div class="ab aui-col-9  aui-background-white alert-lg-white mui-text-left" style="height: 140px;padding:20px 20px">
						如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
					</div>
					
					<div class="mui-row ab rebom aui-col-10 ">
						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="queding('04')"><a class="aui-color-white" href="JavaScript:void(0)" >我要挑战</a></button>
						</div>
					</div>
				</div>
				<!--第四关-->
				<div id="sai_qiu5" class="ab  aui-col-9  mui-text-center">
					<img class=" aui-col-4" style="margin: -65px  auto" src="image/jiu_t.png" alt="">
					<h1 class="aui-color-white sai-mar-t">商品名称</h1>
					<h3 class="aui-color-white">10积分</h3>
					<h3 class="aui-color-white">独创江湖16人模式	</h3>
					<div class="ab aui-col-9  aui-background-white alert-lg-white mui-text-left" style="height: 140px;padding:20px 20px">
						如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
					</div>
					
					<div class="mui-row ab rebom aui-col-10 ">
						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="queding('05')"><a class="aui-color-white" href="JavaScript:void(0)" >我要挑战</a></button>
						</div>
					</div>

				</div>
				<!--第五关-->
				<div id="sai_qiu6" class="ab  aui-col-9  mui-text-center">
					<img class=" aui-col-4" style="margin: -65px  auto" src="image/jiu_t.png" alt="">
					<h1 class="aui-color-white sai-mar-t">商品名称</h1>
					<h3 class="aui-color-white">10积分</h3>
					<h3 class="aui-color-white">独创江湖16人模式	</h3>
					<div class="ab aui-col-9  aui-background-white alert-lg-white mui-text-left" style="height: 140px;padding:20px 20px">
						如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
					</div>
					
					<div class="mui-row ab rebom aui-col-10 ">
						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="queding('06')"><a class="aui-color-white" href="JavaScript:void(0)" >我要挑战</a></button>
						</div>
					</div>
				</div>
				<!--第六关-->
				<div id="sai_qiu7" class="ab  aui-col-9  mui-text-center">
					<img class=" aui-col-4" style="margin: -65px  auto" src="image/jiu_t.png" alt="">
					<h1 class="aui-color-white sai-mar-t">商品名称</h1>
					<h3 class="aui-color-white">10积分</h3>
					<h3 class="aui-color-white">独创江湖16人模式	</h3>
					<div class="ab aui-col-9  aui-background-white alert-lg-white mui-text-left" style="height: 140px;padding:20px 20px">
						如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
					</div>
					
					<div class="mui-row ab rebom aui-col-10 ">
						<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-5 aui-border-radius-30">取消</button>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 ">
							<button type="button" class="mui-btn queding  mui-btn-warning aui-col-5 aui-border-radius-30" onclick="queding('07')"><a class="aui-color-white" href="JavaScript:void(0)" >我要挑战</a></button>
						</div>
					</div>
				</div>
				<!--第七关-->
				
				<div id="pipei" class="ab  aui-col-9 alert-lg-blue mui-text-center" style="display:none;">
					<h1 class="aui-color-white"><strong>梦想挑战赛-我要挑战</strong></h1>
					<div class="re aui-col-9 aui-background-white alert-lg-white mui-text-center">
						<img class="aui-col-2 aui-mar-t-20" src="images/pp_donghua.gif" alt="">
						<h2><strong>正在匹配...</strong> <img class="aui-col-1" src="images/shuaxin.gif" alt=""> </h2>
					</div>
					<h1 class="aui-color-white">满 <span id="numtxt2">4</span> 人开赛</h1>
					<h1 class="aui-color-white">已报名 <span id="bm_num">null</span> 人，还差 <span id="cha_num">null</span> 人</h1>
					<div class="quxiao mui-row  aui-col-10">
						<div class="quxiao ">
							<button type="button" class="mui-btn mui-btn-danger aui-col-6 aui-border-radius-30"  onclick="close_ws()">取消</button>
						</div>
					</div>
				</div>

			</div>
		</div>
	</body>

<script>
for(var i=1;i<8;i++){
	$("#sai_qiu"+i).hide();//隐藏弹窗
	//添加圆球事件
	$("#qiu"+i).click(function() {
		$(".mx_alert").show();
		//alert("#sai_"+$(this).attr("id"));
		$("#sai_"+$(this).attr("id")).show();
	})
}
//添加弹窗取消事件
$(".mui-btn-danger").click(function() {
	$(".mx_alert").hide();
	$("#pipei").hide();
	for(var i=1;i<8;i++){
		$("#sai_qiu"+i).hide();
	}
})
//根据自己的mx值显示灰色和正常色
var mx={$data.my_mx};
if(mx>0){
	for(var i=1;i<8;i++){
		if(mx>i || mx==i){
			$("#qiu"+i).removeClass("bianhui");
			$("#suo"+i).hide();
			if(mx !=i){
				$("#qiu"+i).unbind();
			}else{
				$("#sai_qiu"+i+" .queding").attr("onclick","lingqu()");
				$("#sai_qiu"+i+" a").html("领取奖品");
			}
		}else{
			if(mx+1 !=i){
				//取消球事件
				$("#qiu"+i).unbind();
				//添加锁事件
				$("#suo"+i).click(function() {
					alert("请按顺序完成闯关");
				})	
			}else{
				$("#suo"+i).click(function() {
					$(".mx_alert").show();
					$("#sai_"+$(this).attr("id").replace('suo', 'qiu')).show();
				})
			}
		}
	}
}else{
	$("#suo1").click(function() {
		$(".mx_alert").show();
		$("#sai_qiu1").show();
	})
	for(var i=2;i<8;i++){
		//取消球事件
		$("#qiu"+i).unbind();
		//添加锁事件
		$("#suo"+i).click(function() {
			alert("请按顺序完成闯关");
		})	
	}
}

//确定开始随机匹配
function queding(step){
	$("#deal_id").val("888888"+step);
	//alert(step*1);
	if(step=="01"){
		if({$data.my_rcq_1}<1){
			alert("第1关入场券数量不足");return;
		}
	}else if(step=="02"){
		if( {$data.my_rcq_2}<1 && {$data.my_mx}!=1 ){
			alert("第2关入场券数量不足");return;
		}
	}else{
		if( (step*1-1) != {$data.my_mx} ){
			alert("第"+step*1+"关入场券数量不足");return;
		}
	}
	
	for(var i=1;i<12;i++){
		$("#sai_qiu"+i).hide();//隐藏弹窗
	}
	$(".mx_alert").show();
	$("#pipei").show();
	go(1);
}
function lingqu(){
	//ajax请求
	alert("领取成功");
}
</script>
<input type="hidden" value="" id="buy_jiuliang" />
<input type="hidden" value="" id="deal_id" />
<input type="hidden" value="1" id="isTrue" />
<script>
function go(type){//0创建房间 1快速匹配	
	var isTrue = $("#isTrue").val();
	
	var deal_id=$("#deal_id").val();
	if(isTrue=="1") {	
		var game_num=$("#numtxt2").html();
		//监听快速匹配玩家信息
		var join_group=deal_id+"-"+game_num+"-"+{$data.id};
		init(join_group);
	}
}
</script>
<script>
var ws;
function init(join_group) {
	var host = "ws://47.104.8.67:8282";
	try {
		ws = new WebSocket(host);
		ws.onopen = function(){
			console.log('连接成功');
			ws.send("login:"+{$data.id});
			console.log('发送登陆数据完毕');
			ws.send("join_group:"+join_group);//join_group:deal_id-game_num-userid
			console.log('join_group通知完毕');
		};
		ws.onmessage = function (e) {
			//快速匹配监听 join_group-2
			if(e.data.indexOf("join_group")>=0){
				var n=e.data.split("-");
				//alert(n[1]);
				$("#bm_num").html(n[1]);
				$("#cha_num").html($("#numtxt2").html()-n[1]);
			}
			//监听退出事件 out_group-2
			if(e.data.indexOf("out_group")>=0){
				var n=e.data.split("-");
				//alert(n[1]);
				$("#bm_num").html(n[1]);
				$("#cha_num").html($("#numtxt2").html()-n[1]);
			}
			//监听人满开车
			if(e.data.indexOf("group_ok")>=0){
				console.log('开车啦');
				var n=e.data.split("-");
				var oneuser=n[1].split(",");
				if(oneuser[0]=={$data.id}){
					var deal_id =$("#deal_id").val();
					var game_num=$("#numtxt2").html();
					$.ajax({
						url: 'index.php?ctl=baozang&act=goumai2',
						type: 'POST',
						data: 'deal_id=' + deal_id + '&game_num=' + game_num + '&type=1&uids=' + n[1] +'&t=' + Math.random(),
						dataType: "json",
						success: function (data) {
							console.log(data);
							if(data.status=="1"){
								ws.send("doing:"+deal_id+"-"+game_num+"-"+data.deal_id);//发车成功 doing:deal_id-game_num-deal_id
							}else{
								alert(data.info);
							}
						},
						error: function () {
							//alert("系统错误，请联系管理员");
						}
					});				
				}
			}
			//监听发车成功
			if(e.data.indexOf("doing")>=0){
				var n=e.data.split("-");
				window.location.href='index.php?ctl=game&act=doing&deal_id='+n[1];
			}
			console.log('监听消息:'+e.data);
		};
		ws.onclose = function (msg) {
			console.log('关闭连接');
		};
	}
	catch (ex) {
		console.log(ex);
	}
}

function send(msg) {
	try { 
		ws.send(msg); 
	} catch (ex) { 
		console.log(ex);
	}
}
//刷新或关闭
window.onbeforeunload = function () {
	try {
		//监听异常退出事件
		var game_num=$("#numtxt2").html();
		var deal_id=$("#deal_id").val();
		ws.send("out_group:"+deal_id+"-"+game_num);//out_group:deal_id-game_num
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
};
//手动关闭
function close_ws(){
	try {
		//监听点击取消事件
		var game_num=$("#numtxt2").html();
		var deal_id=$("#deal_id").val();
		ws.send("out_group:"+deal_id+"-"+game_num);//out_group:deal_id-game_num
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
}
</script>		
</html>